<template>
  <div class="my">
    <div class="my-header">
      <div class="header-logo">
        <van-image
          round
          width="60px"
          height="60px"
          :src="dogSvg"
        />
      </div>
      <div class="header-info">
        <div class="info-name">
          {{ userStore.userInfo?.userName || '未登录' }}
        </div>
        <template v-if="!userStore.isLogged">
          <router-link
            style="color: black"
            to="/login"
          >
            <van-button
              class="info-btn"
              plain
              round
              type="info"
            >
              点击登录
            </van-button>
          </router-link>
        </template>
      </div>
    </div>

    <div class="my-content">
      <van-cell-group v-model="userStore.userInfo">
        <van-cell
          title="序列号"
          :value="userStore.userInfo?.id"
        />
        <van-cell
          title="昵称"
          :value="userStore.userInfo?.userName"
        />
        <van-cell
          title="简介"
          :value="userStore.userInfo?.userProfile || '无'"
        />
        <van-cell
          title="权限"
          :value="getRoleText[userStore.userInfo?.userRole]"
        />
      </van-cell-group>

      <van-button
        style="margin: 5px;
        width: 100%"
        type="default"
        @click="openEditDialog"
      >编辑个人信息
      </van-button>
      <van-button
        style="margin: 5px;
        width: 100%"
        type="danger"
        @click="toLogout"
      >退出登录
      </van-button>
    </div>

    <!-- 弹窗表单 -->
    <van-dialog
      v-model:show="showEditDialog"
      title="编辑用户信息"
      show-cancel-button
      :before-close="handleEdit"
    >
      <!-- 表单内容 -->
      <van-form class="p-4">
        <!-- 用户名 -->
        <van-field
          v-model="userEditForm.userName"
          label="昵称"
          placeholder="请输入昵称"
          clearable
        />

        <!-- 密码 -->
        <van-field
          v-model="userEditForm.userPassword"
          label="新密码"
          placeholder="请输入新密码"
          :type="showPassword ? 'text' : 'password'"
          clearable
        >
          <template #right-icon>
            <van-icon
              :name="showPassword ? 'eye-o' : 'closed-eye'"
              @click="showPassword = !showPassword"
            />
          </template>
        </van-field>

        <!-- 简介 -->
        <van-field
          v-model="userEditForm.userProfile"
          label="个人简介"
          placeholder="请输入简介"
          type="textarea"
          autosize
        />
      </van-form>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import dogSvg from '@/assets/img/dog.svg'
import { useUserStore } from '@/stores/userStore'
import { showNotify } from 'vant'
import { editUser } from '@/api/user.js'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()

const getRoleText = {
  'admin': '管理员',
  'user': '普通用户',
  'ban': '封禁'
}

// 弹窗显示控制
const showEditDialog = ref(false)

// 密码明文显示开关
const showPassword = ref(false)

// 表单数据对象
const userEditForm = ref({
  userName: '',
  userProfile: '',
  userPassword: ''
})

// 打开弹窗（可传入初始数据）
const openEditDialog = () => {
  const tempUserInfo = { ...userStore.userInfo }
  userEditForm.value.id = tempUserInfo?.id
  userEditForm.value.userName = tempUserInfo?.userName || ''
  userEditForm.value.userProfile = tempUserInfo?.userProfile || ''
  userEditForm.value.userPassword = ''
  showEditDialog.value = true
}

// 提交编辑
const handleEdit = async (action) => {
  if (action === 'confirm') {
    try {
      // 表单验证
      if (!userEditForm.value.userName.trim()) {
        showNotify({ type: 'danger', message: '昵称不能为空' })
        return false
      }
      // 调用API（示例接口）
      const res = await editUser(userEditForm.value)
      if (res?.code === 0) {
        showNotify({ type: 'success', message: '修改成功！' })
        userStore.setUserInfo(res.data)
      } else {
        showNotify({ type: 'success', message: '修改失败！' })
      }
      return true
    } catch (error) {
      showNotify({ type: 'danger', message: error.message })
      return false
    }
  }
  return true
}

// 退出登录
const toLogout = () => {
  userStore.onLogout()
  router.push('/login')
}

</script>

<style scoped>
.my {
  width: 100%;

  .my-header {
    display: flex;
    align-items: center;
    padding: 20px;

    .header-logo {
      width: 40%;
      display: flex;
      justify-content: center;
    }

    .header-info {
      display: flex;
      width: 60%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20px;

      .info-name {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 5px;
      }

      .info-btn {
        width: 100px;
        height: 35px;
        padding: 5px 8px;
      }
    }
  }

  .my-content {

  }
}
</style>